<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div class="joys-navigation2-content">
    <!-- 应用标签行 -->
    <div class="joys-navigation2-tags" style="width: 100%">
      <div id="myShowTag" class="joys-navigation2-show-tag">
        <div
          id="myTag"
          style="display: inline-block;height: 48px;white-space: nowrap"
        >
          <div
            class="joys-navigation2-tag"
            @click="goHome"
            style="cursor:pointer;display: inline-block;"
          >
            <span class="joys-navigation2-dot" :class="{ joysredNavigation2Dot: activeIndex === -1 }"></span>
            <span class="joys-navigation2-tag-text" :class="{ joysTabRedDotText: activeIndex === -1 }">{{
              home
            }}</span>
          </div>
          <div
            class="joys-navigation2-tag" v-for="(applet, idx) in displayApplets"
            :key="applet.appletId" @click="activeApplet(applet.idx)" style="cursor:pointer;display: inline-block;">
            <span class="joys-navigation2-dot" :class="{ joysredNavigation2Dot: activeIndex === applet.idx }"></span>
            <span class="joys-navigation2-tag-text" :class="{ joysTabRedDotText: activeIndex === applet.idx }">{{ applet.appletName }}</span>
            <i class="el-icon-close" @click.stop="closeThisApplet(idx, applet.idx)"></i>
          </div>
        </div>
      </div>
      <!-- 标签页展示空间不足时出现下拉按钮，其内存储超出的标签页 -->
      <div class="joys-tag-menu">
        <el-dropdown v-if="hideApplets.length">
          <el-button
            type="text"
            style="padding-bottom: 0;padding-top: 18px;color: #001616"
            icon="joys-icon-more2"
          ></el-button>
          <el-dropdown-menu slot="dropdown" style="margin-bottom:0;padding: 0;">
            <div
              class="joys-navigation2-hide-tag"
              v-for="(applet, idx) in hideApplets"
              :key="applet.appletId"
              @click="activeOtherApplet(idx, applet.idx)"
              style="cursor:pointer"
            >
              <span class="joys-navigation2-dot"></span>
              <span style="font-size: 12px">{{ applet.appletName }}</span>
              <i
                class="el-icon-close"
                @click.stop="closeOtherApplet(idx, applet.idx)"
              ></i>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="onCommand">
          <el-button
            type="text"
            style="padding-bottom: 0;padding-top: 18px;color: #001616"
          >
            <i class="joys-icon-fusionmenu"/>
          </el-button>
          <el-dropdown-menu slot="dropdown" style="margin-bottom:0;padding: 0;">
            <el-dropdown-item
              command="CLOSE_ACTIVE"
              :disabled="activeIndex < 0"
              class="joys-admin-tag__ext-item"
            >
              <i class="joys-icon-closethis joys-admin-tag__ext-item-icon"/>
              <span class="joys-admin-tag__ext-item-text">关闭当前</span>
            </el-dropdown-item>
            <el-dropdown-item
              command="CLOSE_ALL"
              :disabled="!applets || applets.length == 0"
              class="joys-admin-tag__ext-item"
            >
              <i class="joys-icon-closeall joys-admin-tag__ext-item-icon"/>
              <span class="joys-admin-tag__ext-item-text">关闭所有</span>
            </el-dropdown-item>
            <el-dropdown-item
              v-for="(action, index) in exActions"
              :key="action.command"
              :divided="index == 0 || action.divided"
              :disabled="action.disabled"
              :command="action.command"
              v-if="activeIndex == -1"
              class="joys-admin-tag__ext-item"
            >
              <!--<i :class="action.iconClass"></i>-->
              <i class="joys-icon-closethis joys-admin-tag__ext-item-icon"></i>
              <span class="joys-admin-tag__ext-item-text">{{
                action.name
              }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 主内容显示区 -->
    <div class="cont">
      <home-page
        :ex-action-cmd="exActionCmd"
        @setInitCmd="setInitCmd"
        v-show="activeIndex == -1"
      ></home-page>
      <applet-page v-show="activeIndex > -1"></applet-page>
    </div>
    <!-- 退出系统弹窗 -->
    <el-dialog
      width="500px"
      top="30vh"
      :show-close="false"
      :visible="exitDialogVisible"
    >
      <h3>确定退出系统？</h3>
      <div slot="footer">
        <el-button size="small" type="default" @click="cancel">不退出</el-button>
        <el-button size="small" type="primary" @click="exit">退出</el-button>
      </div>
    </el-dialog>
    <!-- 主题切换弹窗 -->
    <el-dialog
      width="500px"
      top="30vh"
      title="切换主题请重新登陆或者浏览器刷新！"
      :show-close="false"
      :visible="themeDialogVisible"
    >
      <el-carousel trigger="click" height="150px" :autoplay="false" @change="themeChange">
        <el-carousel-item v-for="item in themes" :key="item.index"
                          :style="'background-color:' +item.color+';text-align: center;'">
          <!--<h3 style="color: #fff;" class="small">{{item.text}}</h3>-->
        </el-carousel-item>
      </el-carousel>
      <div slot="footer">
        <ft-cancel-btn text="取消" @click="themeDialogVisible=false"></ft-cancel-btn>
        <ft-save-btn text="确定" @click="themeClose"></ft-save-btn>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {mapState, mapActions} from "vuex";
  import bus from "../../assets/Bus.js";
  import AppletPage from "./AppletPage";
  import HomePage from "../HomePage";

  export default {
    name: "Content",
    components: {HomePage, AppletPage},
    data() {
      return {
        menuArr: [],
        pullDown: false,
        closeShow: true,
        dotChange: true,
        PDShow: false,
        pullDownArr: [],
        inde: -1,
        mask: "",
        home: "首页",
        exitDialogVisible: false,
        //主题切换
        themeDialogVisible: false,
        themeColor: null,
        themes: [{
          index: 0,
          text: '黑色代表稳定 黑色具有高贵，稳重，科技的意象',
          color: '#001616',
          currentTheme: 'theme-black'
        },
          {
            index: 1,
            text: '金融蓝、宝石蓝，蓝色代表未来希望',
            color: '#2455E7',
            currentTheme: 'theme-blue'
          },
          {
            index: 2,
            text: '金融金，金色代表公司所处金融行业属性，金色是财富的象征',
            color: '#BE9457',
            currentTheme: 'theme-golden'
          },
          {
            index: 3,
            text: '',
            color: '#F65244',
            currentTheme: 'theme-pink'
          }
        ],
        // 显示页签数组
        // displayApplets:null,
        // 隐藏（下拉）页签数组
        hideApplets: [],
        // 标签栏总宽度
        myShowTagWidth: 0,
        // “首页”宽度
        myTagWidth: 0,
        // 各应用标签宽度和
        dynamicTagWidth: 0,
        // 监听窗口宽度
        screenWidth: document.documentElement.clientWidth,
        // 扩展页签
        exActions: [
          {
            name: "可选工作台",
            iconClass: "",
            command: "OPTIONAL_DASHBOARDS",
            listener: this,
            disabled: false
          },
          {
            name: "自定义工作台",
            divided: true,
            iconClass: "",
            command: "DESIGN_DASHBOARD_START",
            listener: this,
            disabled: false
          }
        ],
        exActionCmd: null
      };
    },

    props: {
      appletId: {type: String},
      source: {type: String}
    },
    created() {
      this.$bus.addMessageListener("OPEN_APPLET", params => {
        this.openApplet(params);
      });
    },

    mounted() {
      bus.$on("quit", mask => {
        this.exitDialogVisible = true;
      });
      //主题切换
      bus.$on("theme", mask => {
        this.themeDialogVisible = true;
      });

      // this.displayApplets=[].concat(this.applets),
      window.onresize = () => {
        // 定义窗口大小变更通知事件
        this.screenWidth = document.documentElement.clientWidth; //窗口宽度
      };
    },

    computed: {
      ...mapState(["applets", "displayApplets", "activeIndex", "user"])
    },
    //监听参数变动后方法
    watch: {
      displayApplets: {
        handler(val) {
          if (val.length) {
            this.getStyle();
          }
        }
      },

      screenWidth: {
        handler(val) {
          if (this.displayApplets.length) {
            this.getStyle();
            if (this.myTagWidth < this.myShowTagWidth) {
              this.displayApplets.unshift(...this.hideApplets);
              this.hideApplets = [];
            }
            // }
          } else if (this.hideApplets.length) {
            this.displayApplets.unshift(...this.hideApplets);
            this.hideApplets = [];
          }
        }
      }
    },
    methods: {
      ...mapActions([
        "activeApplet",
        "closeApplet",
        "closeDisplayApplet",
        "openApplet"
      ]),
      goHome() {
        this.activeApplet(-1);
      },
      exit() {
        this.exitDialogVisible = false;
        localStorage.removeItem("AUTH-TOKEN");
        if (this.$route.query.source == "saas") {
          window.location.href =
            "./login/?from=" +
            encodeURIComponent(location.href) +
            "?appletId=201020&source=saas" +
            "#/loginSaas";
        } else {
          window.location.href =
            "./login/?from=" + encodeURIComponent(location.href);
        }
      },
      cancel() {
        this.exitDialogVisible = false;
      },
      onCommand(cmd) {
        if (cmd == "CLOSE_ACTIVE") {
          this.closeAcIdx(this.activeIndex);
        } else if (cmd == "CLOSE_ALL") {
          const count = this.applets ? this.applets.length : 0;
          for (let i = count - 1; i >= 0; i--) {
            this.closeApplet(i);
          }
          this.closeDisplayApplet();
          this.hideApplets = [];
        }
        for (let i in this.exActions) {
          const action = this.exActions[i];
          if (action.command === cmd) {
            this.exActionCmd = cmd;
            break;
          }
        }
      },
      setInitCmd() {
        this.exActionCmd = null;
      },
      //计算应用标签所占的宽度px
      getStyle(el, name) {
        this.$nextTick(() => {
          // vue 渲染完成事件-vue回调函数，打开节点，标签（非数据内容）渲染完毕后，再获取getElementById CSS属性，否则报错
          this.removeElement(this.applets[this.applets.length - 1].appletId);
          //标签栏总宽度
          var myShowTag1 = document.getElementById("myShowTag");
          this.myShowTagWidth = Number(
            window.getComputedStyle(myShowTag1, null).width.replace("px", "")
          );
          //标签盒子宽度
          var myTag = document.getElementById("myTag");
          this.myTagWidth = Number(
            window.getComputedStyle(myTag, null).width.replace("px", "")
          );
          if (this.myTagWidth > this.myShowTagWidth) {
            this.hideApplets.unshift(this.displayApplets[0]); //将第一个放到下拉页签中
            this.displayApplets.shift();
          }
          console.log(this.applets[0].routeUrl);
        });
      },
      //打开下拉列表中的应用
      activeOtherApplet(idx, acIndex) {
        this.displayApplets.push(this.hideApplets[idx]);
        this.hideApplets.splice(idx, 1);
        this.activeApplet(acIndex);
      },
      //关闭下拉列表中的应用
      closeOtherApplet(idx, acIndex) {
        //删除下拉页签的该页签
        this.hideApplets.splice(idx, 1);
        //真正的关闭该页签
        this.closeApplet(acIndex);
        this.changeIdx();
      },
      //关闭当前
      closeAcIdx(acIndex) {
        var appletId = this.applets[acIndex].appletId;
        for (var i = 0; i < this.displayApplets.length; i++) {
          var disAppletId = this.displayApplets[i].appletId;
          if (disAppletId == appletId) {
            this.closeThisApplet(i, acIndex);
            break;
          }
        }
      },
      //关闭应用
      closeThisApplet(idx, acIndex) {
        this.displayApplets.splice(idx, 1);
        if (this.hideApplets.length) {
          this.displayApplets.unshift(this.hideApplets[0]);
          this.hideApplets.splice(0, 1);
        }
        //真正的关闭该页签
        this.closeApplet(acIndex);
        this.changeIdx();
      },
      //如果打开的应用，在下拉列表里已存在,则直接激活无需重新打开
      removeElement(val) {
        for (let i = 0; i < this.hideApplets.length; i++) {
          if (val == this.hideApplets[i].appletId) {
            this.activeOtherApplet(i, this.hideApplets[i].idx);
            break;
          }
        }
      },
      // 更新数组记录的位置
      changeIdx() {
        for (var i = 0; i < this.applets.length; i++) {
          var appletId = this.applets[i].appletId;
          for (let m = 0; m < this.displayApplets.length; m++) {
            var displayAppletsId = this.displayApplets[m].appletId;
            if (appletId == displayAppletsId) {
              this.displayApplets[m].idx = i;
            }
          }
          for (let n = 0; n < this.hideApplets.length; n++) {
            let hideAppletsId = this.hideApplets[n].appletId;
            if (appletId == hideAppletsId) {
              this.hideApplets[n].idx = i;
            }
          }
        }
      },
      //主题切换确定
      themeClose() {
        this.themeDialogVisible = false
        localStorage.setItem('current-theme', this.themeColor.currentTheme)
      },
      themeChange(index) {
        this.themeColor = this.themes[index]
      }
    }
  };
</script>
<style>
  .joys-admin-tag__ext-item.el-dropdown-menu__item {
    width: 180px;
    height: 48px;
    line-height: 48px;
    padding-left: 24px;
    border-top: #f2f2f2 solid 1px;
  }

  .joys-admin-tag__ext-item.el-dropdown-menu__item:not(.is-disabled):hover,
  .joys-admin-tag__ext-item.el-dropdown-menu__item:focus {
    background-color: #f2f2f2;
  }

  li.el-dropdown-menu__item.el-dropdown-menu__item--divided:before {
    height: 0;
    display: none;
  }

  .el-dropdown-menu__item--divided {
    position: relative;
    margin: 0 !important;
  }

  .joys-admin-tag__ext-item:first-child {
    border-top: none;
  }

  .joys-admin-tag__ext-item-icon {
    font-size: 12px;
  }

  .joys-admin-tag__ext-item-text {
    margin-left: 18px;
  }
</style>
<style scoped lang="less">
  #close {
    width: 180px;
    height: 96px;
    background: #fff;
    position: fixed;
    right: 38px;
    top: 105px;
    box-shadow: #ccc 0 0 5px;
    z-index: 10;
  }

  #close h3 {
    width: 100%;
    height: 50%;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  #close h3:hover {
    background: #999;
  }

  .cont {
    flex: 1;
    position: relative;
    overflow: auto;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

